
import React, { useState } from 'react';
import styles from '@/components/home/coustomCarousel.module.scss'
import { Swiper, SwiperSlide } from 'swiper/react';

import { Pagination, Controller, Autoplay, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';


interface Iprops {
    className: string
}
const data = [
    {
        "targetId": 281,
        "title": "一项在EGFR突变阳性IA2-IA3期非小细胞肺癌患者肿瘤全切除术后评估奥希替尼辅助治疗对比安慰剂的疗效和安全性的随机、双盲、安慰剂对照国际III期研究（ADAURA2）",
        "coverImg": null,
        "carouselImg": null,
        "firstCategory": null
    },
    {
        "targetId": 282,
        "title": "一项在晚期/转移性HER2阴性胃/胃食管结合部腺癌受试者中评估帕博利珠单抗（MK-3475）联合仑伐替尼（E7080/MK-7902）联合化疗对比标准治疗作为一线治疗的有效性和安全性的III期、随机研究（LEAP-015）",
        "coverImg": null,
        "carouselImg": null,
        "firstCategory": null
    }
]

const CoustomCarousel: React.FC<Iprops> = (props: Iprops) => {
    const { className } = props


    const classs = `${styles.coustomCarousel} ${className}`

    const pagination = {
        clickable: true,
        renderBullet: function (index: number, className: string) {
            return `<span class="${className} ${styles.swiperPaginationBullet}"> </span>`;
        },
    };
    return <div className={classs}>

        <Swiper
            spaceBetween={30}
            centeredSlides={false}
            autoplay={{
              delay: 2500,
              disableOnInteraction: false,
            }}
            pagination={pagination}
            navigation={true}
            modules={[Autoplay, Pagination, Navigation]}
           
        >
            {data.map(v => {
                return <SwiperSlide key={v.targetId}
                >
                    <div className={styles.item} >
                        {v.title}
                    </div>
                </SwiperSlide>
            })}


        </Swiper>

    </div>
}

export default CoustomCarousel;